<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>使用jQuary修改表格</title>
    <style type="text/cs">
        body {
            font-size: 13px;
            line-height: 25px;
        }

        table {
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width: 300px;
        }

        td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        .center {
            text-align: center;
        }
    </style>
	//219971207 傅博英
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        function addRow() {
            
            var newRow = $("<tr></tr>"); //创建行节点
            var col1 = $("<td>幸福从天而降</td>"); //创建单元格节点
            var col2 = $("<td>&yen;18.50</td>");
            col2.attr("align", "center");
            newRow.append(col1); //把单元格添加到行节点中
            newRow.append(col2);
            $("#row1").parent().find("#row3").before(newRow); //把行节点添加到表格末尾
        }

        function updateRow() {
           
            $("#row1").css({
                "font-weight": "bold",
                "text-align": "center",
                "background-color": "#cccccc"
            });

        }

        function delRow() {
            
            var dRow = $("tr"); //访问所有行节点
            if (dRow.eq(2).length !== 0) { //判断第三行是否存在
                dRow.eq(2).remove(); //删除第三行
            }

        }

        function copyRow() {
            
            var oldRow = $("#row3"); //访问复制的行
            var newRow = oldRow.clone(true); //复制指定的行及子节点
            $("#myTable").append(newRow); //在指定节点的末尾添加行

        }			
    </script>
</head>

<body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
        <tr id="row1">
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr id="row2">
            <td>看得见风景的房间</td>
            <td class="center">&yen;30.00</td>
        </tr>
        <tr id="row3">
            <td>60个瞬间</td>
            <td class="center">&yen;32.00</td>
        </tr>
    </table>
    <input name="b1" type="button" value="增加一行" onclick="addRow()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
    <input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
    <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

</body>

</html>